
<template>
  <div class="home-tab">
    <van-tabs v-model="activeIndex">
      <van-tab v-for="item in channelsList"
               :title="item.name"
               :key="item.id">
        <!-- 子组件内容展示 -->
        <div class="scroll-wrapper">
          <ArticleList :item="item" />
        </div>
      </van-tab>
    </van-tabs>
    <!-- 准备点击按钮 -->
    <div class="bar-btn"
         @click="showChannelEdit = true">
      <van-icon name="wap-nav" />
    </div>
    <!-- 使用action-sheet组件-->
    <van-action-sheet v-model="showChannelEdit"
                      get-container="body">
      <ChannelEdit :my-channels="channelsList"
                   @changeTitle="changeTitle" />
    </van-action-sheet>
  </div>
</template>

<script>
import { getChannels } from '@/api/channel.js'
import ArticleList from '@/views/Home/ArticleList'
import ChannelEdit from './ChannelEdit'
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      channelsList: [], // 存储channels  的tab
      loading: false,
      finished: false,
      showChannelEdit: false, // 是否显示频道操作
      activeIndex: null // 当前显示第几个标签
    }
  },
  methods: {
    hgetChannels () {
      getChannels().then(res => {
        this.channelsList = res.data.data.channels
      })
    },
    changeTitle (id) {
      console.log('z', id)
      this.activeIndex = id
      this.showChannelEdit = false
    }
  },
  mounted () {
    this.hgetChannels()
  }
}
</script>
<style lang="less" scoped>
.home-tab {
  /deep/.van-tabs__line {
    background-color: #3196fa;
  }
}
// 专门为列表区域腾出一块空间
/deep/.van-tabs__content {
  position: fixed;
  top: 96px;
  bottom: 50px;
  width: 100%;
  overflow: auto;
}
// tabs让出右侧按钮控件
/deep/.van-tabs--line .van-tabs__wrap {
  padding-right: 30px;
}
.bar-btn {
  position: fixed;
  right: 5px;
  top: 57px;
  display: flex;
  align-items: center;
  background-color: #fff;
  opacity: 0.8;
  z-index: 1;
  .van-icon-wap-nav {
    font-size: 20px;
  }
}
</style>
